<!DOCTYPE html>
<html>
<head>
    <title>F-t Graph</title>
</head>
<body>
    <canvas id="physicsGraph" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsGraph');
        const ctx = canvas.getContext('2d');

        // Define coordinate system parameters
        const originX = 80;
        const originY = 280;
        const scaleX = 40; // pixels per second
        const scaleY = 20; // pixels per Newton

        // Helper functions to convert graph coordinates to canvas coordinates
        function toCanvasX(t) {
            return originX + t * scaleX;
        }

        function toCanvasY(F) {
            return originY - F * scaleY;
        }

        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // --- Draw Axes ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        // Y-axis
        ctx.moveTo(originX, originY + 10);
        ctx.lineTo(originX, 50);
        // X-axis
        ctx.moveTo(originX - 10, originY);
        ctx.lineTo(toCanvasX(8), originY);
        ctx.stroke();

        // --- Draw Axis Labels ---
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('F', originX - 35, 90);
        
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('/ N', originX - 28, 90);

        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('t', toCanvasX(7.5), originY + 10);

        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('/ s', toCanvasX(7.7), originY + 10);

        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('O', originX - 8, originY);

        // --- Draw Ticks and Values on Axes ---
        ctx.font = '18px Times New Roman';
        // X-axis ticks
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('5', toCanvasX(5), originY + 5);
        ctx.fillText('7', toCanvasX(7), originY + 5);

        // Y-axis tick
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('10', originX - 8, toCanvasY(10));

        // --- Draw Dashed Lines ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        // Horizontal dashed line
        ctx.moveTo(originX, toCanvasY(10));
        ctx.lineTo(toCanvasX(5), toCanvasY(10));
        // Vertical dashed line
        ctx.moveTo(toCanvasX(5), toCanvasY(10));
        ctx.lineTo(toCanvasX(5), originY);
        ctx.stroke();
        
        // Reset to solid line for the main graph
        ctx.setLineDash([]);

        // --- Draw the Main Graph Line ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        ctx.moveTo(toCanvasX(0), toCanvasY(0)); // Start at (0, 0)
        ctx.lineTo(toCanvasX(5), toCanvasY(10)); // Line to (5, 10)
        ctx.lineTo(toCanvasX(7), toCanvasY(0)); // Line to (7, 0)
        ctx.stroke();
        
        // --- Draw the Caption ---
        ctx.fillStyle = 'black';
        ctx.font = '20px SimHei'; // A common font for Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('题 3 图', canvas.width / 2, canvas.height - 10);
        
    </script>
</body>
</html>